<template>
  <view class="tabsWrap">
    <CommonTabs v-model="tabsId" :tabs="tabs" />

    <view class="bellIcon" @click="goMessage">
      <uv-icon name="bell" size="50rpx" color="#333333" />
      <view class="badge">
        <uv-badge
          numberType="overflow"
          bgColor="#E60014"
          max="99"
          :value="0"
          :showZero="true"
        ></uv-badge>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import CommonTabs from "../common/tabs.vue";

const props = defineProps({
  type: {
    type: String,
    default: "index", // search
  },
});

const pageType = props.type;

const tabsId = ref(1);

const tabs = computed(() => {
  if (pageType === "index") {
    return [
      {
        name: "关注",
        id: 1,
      },
      {
        name: "交易",
        id: 2,
      },
      {
        name: "交流",
        id: 3,
      },
    ];
  } else if (pageType === "search") {
    return [
      {
        name: "用户",
        id: 1,
      },
      {
        name: "交易",
        id: 2,
      },
      {
        name: "交流",
        id: 3,
      },
    ];
  }
});

const goMessage = () => {
  uni.navigateTo({ url: "/pages/message/index" });
};
</script>

<style lang="scss">
.tabsWrap {
  display: flex;
  justify-content: center;
  position: relative;
  background: #fff;
}

.bellIcon {
  position: absolute;
  top: 20rpx;
  right: 38rpx;

  .badge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate3d(50%, -10%, 0);
  }
}
</style>
